<template>
  <ContainerGroup id="containerGroup">
    <Container>
      <!-- <el-button class="goback" @click="resetForm">取消</el-button> -->
      <el-button
        class="submit"
        type="primary"
        @click="submitForm('bedForm')"
      >提交</el-button>
    </Container>
    <Container height="fill">
      <el-form
        ref="bedForm"
        :model="bedForm"
        :rules="bedrules"
        label-position="right"
        class="demo-ruleForm"
        label-width="100px"
      >
        <el-form-item label="患者姓名" prop="patientName">
          <el-input
            v-model="bedForm.patientName"
            size="mini"
            style="width: 180px"
          />
        </el-form-item>
        <el-form-item label="患者身份证" prop="patientIdnno">
          <el-input
            v-model="bedForm.patientIdnno"
            size="mini"
            style="width: 180px"
          />
        </el-form-item>
        <el-form-item label="患者电话" prop="patientPhone">
          <el-input
            v-model="bedForm.patientPhone"
            size="mini"
            style="width: 180px"
          />
        </el-form-item>
        <el-form-item label="创建者名称" prop="operName">
          <el-input
            v-model="bedForm.operName"
            size="mini"
            style="width: 180px"
          />
        </el-form-item>
        <el-form-item label="创建者工号" prop="operNo">
          <el-input
            v-model="bedForm.operNo"
            size="mini"
            style="width: 180px"
          />
        </el-form-item>
        <el-form-item label="床号" prop="bedNo">
          <el-input
            v-model="bedForm.bedNo"
            size="mini"
            :disabled="true"
            style="width: 180px"
          />
        </el-form-item>
        <el-form-item label="住院科室" prop="deptCode">
          <el-select
            v-model="bedForm.deptCode"
            placeholder="请选择住院科室"
            size="mini"
            style="width: 180px"
            filterable
            clearable
            @change="beddeptChange"
          >
            <el-option
              v-for="item in hospitalizationSelect.departmentoptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="病区" prop="nurseCellCode">
          <el-select
            v-model="bedForm.nurseCellCode"
            placeholder="请选择病区"
            size="mini"
            style="width: 180px"
            filterable
            clearable
          >
            <el-option
              v-for="item in hospitalizationSelect.inpatientAreaoptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="占床医生" prop="subscribeDoctCode">
          <el-select
            v-model="bedForm.subscribeDoctCode"
            placeholder="请选择占床医生"
            size="mini"
            style="width: 180px"
            :filterable="true"
            :remote="true"
            :remote-method="remoteMethod"
            clearable
          >
            <el-option
              v-for="item in hospitalizationSelect.predoctCodeoptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="remarks">
          <el-input v-model="bedForm.remarks" size="mini" />
        </el-form-item>
      </el-form>
    </Container>
  </ContainerGroup>
</template>
<script>
import {
  getDeptList,
  getPatientAreaDTO,
  getDoctList,
  insertOccupationBed
} from '../../utils/apis/registrationApi'
export default {
  name: 'AddUser',
  data() {
    return {
      bedForm: {
        bedNo:	'', // 床号
        deptCode: '', // 科室编码
        deptName: '', // 科室名称
        nurseCellCode: '', // 病区编码
        nurseCellName: '', // 病区名称
        operName: '', // 创建者名称
        operNo: '', // 创建者工号
        patientIdnno: '', // 患者身份证
        patientName: '', // 患者姓名
        patientPhone: '', // 患者手机号码
        remarks: '', // 备注
        subscribeDoctCode: '', // 占床医生编码
        subscribeDoctName: '' // 占床医生名字
      },
      bedrules: {
        bedNo: [
          { required: true, message: '请填写床号', trigger: 'blur' }
        ],
        deptCode: [{ required: true, message: '请选择科室', trigger: 'change' }],
        nurseCellCode: [{ required: true, message: '请选择病区', trigger: 'change' }],
        operName: [{ required: true, message: '请填写创建者名称', trigger: 'blur' }],
        operNo: [{ required: true, message: '请填写创建者工号', trigger: 'blur' }],
        patientIdnno: [{ required: true, message: '请填写患者身份证', trigger: 'blur' }],
        patientName: [{ required: true, message: '请填写患者姓名', trigger: 'blur' }],
        patientPhone: [{ required: true, message: '请填写患者手机号码', trigger: 'blur' }],
        remarks: [{ required: true, message: '请填写备注', trigger: 'blur' }],
        subscribeDoctCode: [{ required: true, message: '请选择占床医生', trigger: 'change' }]
      }, // 占床必填非空判断
      hospitalizationSelect: {
        departmentoptions: [],
        inpatientAreaoptions: [],
        predoctCodeoptions: []
      }
    }
  },
  created() {
    const arr = window.location.href.split('?')[1].split('=')
    this.bedForm.bedNo = arr[1]
  },
  methods: {
    // 获取科室下拉数据
    getDept() {
      this.ruleFormSelect.deptCodeoptions = []
      this.hospitalizationSelect.departmentoptions = []
      const parms = {
        districtCodeList: [this.$route.query.districtCodeList]
      }
      getDeptList(parms).then((res) => {
        if (res.data.code === 200) {
          let beddats = {
            label: '',
            value: ''
          }
          res.data.data.forEach((element) => {
            beddats = {
              label: element.deptName,
              value: element.deptCode + '-' + element.deptName
            }
            this.hospitalizationSelect.departmentoptions.push(beddats)
          })
        }
      })
    },
    // 占床医生
    remoteMethod(val) {
      this.hospitalizationSelect.predoctCodeoptions = []
      const arr = this.bedForm.deptCode.split('-')
      getDoctList({ deptCode: arr[0], name: val }).then(
        (res) => {
          if (res.data.code === 200) {
            let dats = {
              label: '',
              value: ''
            }
            res.data.data.forEach((element) => {
              dats = {
                label: element.name,
                value: element.id + '-' + element.name
              }
              this.hospitalizationSelect.predoctCodeoptions.push(dats)
            })
          }
        }
      )
    },
    // 占床根据科室查病区
    beddeptChange(val, areaCode) {
      this.bedForm.subscribeDoctCode = ''
      this.hospitalizationSelect.inpatientAreaoptions = []
      this.hospitalizationSelect.predoctCodeoptions = []
      const arr = this.bedForm.deptCode.split('-')
      getPatientAreaDTO({ deptCode: arr[0], areaCode: areaCode }).then(
        (res) => {
          if (res.data.code === 200) {
            let dats = {
              label: '',
              value: ''
            }
            res.data.data.forEach((element) => {
              dats = {
                label: element.areaName,
                value: element.areaId + '-' + element.areaName
              }
              this.hospitalizationSelect.inpatientAreaoptions.push(dats)
            })
          }
        }
      )
    },
    // resetForm() {
    //   this.$refs.bedForm.resetFields()
    // },
    submitForm(ruleForm) {
      this.$refs[ruleForm].validate((valid) => {
        if (valid) {
          const params = { ...this.bedForm }
          const arr = params.deptCode.split('-')
          const arr1 = params.nurseCellCode.split('-')
          const arr2 = params.subscribeDoctCode.split('-')
          params.deptName = arr[1]
          params.deptCode = arr[0]
          params.nurseCellName = arr1[1]
          params.nurseCellCode = arr1[0]
          params.subscribeDoctCode = arr2[0]
          params.subscribeDoctName = arr2[1]
          insertOccupationBed(params).then((res) => {
            if (res.data.code === 200) {
              this.$message.success(res.data.data)
              // this.resetForm()
              this.openMent()
            } else {
              this.$message.error(res.data.message)
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
</style>
